import Vue from 'vue'
import App from './App.vue'
import router from './router'
import store from './store'
// 只是为了让permision.js里的代码执行，不用变量接收
import './router/permision'

// import hljs from 'highlight.js' // hljs对象
import 'highlight.js/styles/default.css' // 代码高亮的样式
import './VantRegister' // 引入vant组件的全局注册文件，让此js文件执行
// 引入amfe-flexible,
import 'amfe-flexible'
import diretivesObj from '@/utils/directives'
import ToastObj from '@/ui/Notify'
import '../clearLog'
Vue.use(ToastObj)
// 自定义一个代码高亮指令
// Vue.directive('highlight', function (el) {
//   const highlight = el.querySelectorAll('pre,code') // 获取里面所有pre或者code标签
//   highlight.forEach((block) => {
//     hljs.highlightElement(block) // 突出显示这些标签(以及内部代码, 会自动识别语言)
//   })
// })
Vue.use(diretivesObj)
Vue.config.productionTip = false

new Vue({
  router,
  store,
  render: h => h(App)
}).$mount('#app')

// 1. vant组件库的使用
// 下载vant(yarn add vant)
// 下载自动按需引入的插件 (yarn add babel-plugin-import -D)
// 在babel.config.js里面填入文档配置，重启服务器
// 在main.js中引入vant组件，并全局注册
// 在任意组件内就可以使用vant-开头的全局组件了

// 2. vant组件库及其他组件进行移动端适配
// flexible.js适配原理
// 获取html的宽度/10
// 参照iphone6的机型还原设计图，屏幕宽度375px =>  html的font-size：37.5px
// 把除html以外的子标签的长度单位px换算为rem
// rem值 = 设计图(1:1)上的宽度px / 37.5(直接计算、px to rem 插件、工程化插件)
// 下载amfe-flexible、 postcss、 postcss-pxtorem@5.1.1
// 目录下创建postcss.config.js文件配置

// 7.项目优化
// 7.1 路由懒加载 (当路由匹配到相应路由规则时，采取加载相应的js文件)
// 7.2 登录状态下，修改地址栏路径为login,跳转到登录页的问题
//  ---设置路由守卫如果跳转路径为login，且token不为空，阻止跳转
// 7.3 token过期跳转登录页问题(设置请求拦截器)
//  ---在登录页面保存token时同时保存刷新token(refresh_token)，在api里定义刷新token的方法
//  ---在请求拦截器如果响应状态为401，则调用上述方法，传入刷新token，重新获取token，保存到本地，设置请求头，重新发送请求
// 7.4 api方法分散管理
//  ---api分散开，然后导入index.js再导出
// 7.5 refreshToken过期
// 判断响应状态码为500，并且error.config.url ==='/v1_0/authorizations'则需要清除token和refresh_token，跳转登录页
// 7.6 组件缓存
// keep-alive标签包裹一级和二级路由挂载点
// 缓存不包含文章详情页和搜索结果页面exclude
// 组件被缓存后，没有creat和created状态，被active和actived(激活和被激活状态)所代替
// 7.7 头像更新的问题(编辑页面更改头像后，用户页面已被缓存，不会更新)
// 方法一： 将用户页面的created改为actived
// 方法二：vuex
// 用户名也是要vuex管理
// 7.8 文章中的代码高亮效果 highlight.js插件
// 7.9 文章加载中状态(Loading组件)
// 7.10 token过期重新登录后跳转原页面
// 点击登录，如果路由路径上有参数，则跳转相应的路由路径，如果没有则跳转home页
// 7.11 图片懒加载
// 图片标签进入视口之后才给图片的src赋值
// 7.12 自动聚焦指令
// 7.13 抽离组件注册**
// 7.14 切换首页和我的页面时，保留频道的滚动位置******meta
// 7.15 保留所有频道的滚动位置tabs的before-change事件
// 7.16 封装本地存储方法storage.js**
// 7.17 封装便于扩展的Notify**src/ui/Notify
// 8. 补充知识点
// 后端生成id的方法：数据库作为数字生成/使用UUID库（随机数+时间戳+算法）
// 最大数为9开头的16位数字(超过数字精度不准)
// 解决方法：截取/json-bigint包下载并使用(将数字截成14位数)
// axios({
// 在本地直接向不同源的网站发生axios请求，会发生跨域问题
// 解决方案：使用api/来代替需要跨域请求的url地址，在vue.config.js中devServer添加配置
// url: 'http://c.m.163.com/nc/article/headline/T1348647853363/0-40.html'
//   url: '/api/nc/article/headline/T1348647853363/0-40.html'
// }).then(res => {
//   console.log(res)
// }).catch(re => {
//   console.log((re))
// })

// map文件记录代码在打包之前的位置信息，报错时便于查找
